<template>
  <div id="app">
    <div class="navbar">
      <img
        src="https://likede2-admin.itheima.net/img/logo.3673fab5.png"
        width="88"
        style="position: relative; top: 4px"
        alt=""
        class="logo"
      />
      <div class="rightbox">
        <div class="picture">
          <img
            style="vertical-align: middle"
            src=""
            alt=""
          />
        </div>
        <div class="username">欢迎您，{{ $store.state.user.userName }}</div>
        <div @click="outFn">退出<i class="el-icon-caret-bottom"></i></div>
      </div>
    </div>
    <div class="leftList" style="background-color: rgb(248, 250, 253)">
      <el-row class="tac">
        <el-col :span="12">
          <!-- router 组件自带跳转功能 通过index设置跳转路径 -->
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            text-color="#000"
            active-text-color="#5f84ff"
          >

                 <el-menu-item index="/likede">
              <i class="el-icon-house"></i>
              <span slot="title">帝可得</span>
            </el-menu-item>

            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>工单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/runOrder">运营工单</el-menu-item>
                <el-menu-item index="/operationOrder">运维工单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-map-location"></i>
                <span>点位管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/areaCtrl">区域管理</el-menu-item>
                <el-menu-item index="/placeCtrl">点位管理</el-menu-item>
                <el-menu-item index="/withCtrl">合作商管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-coordinate"></i>
                <span>设备管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="unitCtrl">设备管理</el-menu-item>
                <el-menu-item index="/unitStatus">设备状态</el-menu-item>
                <el-menu-item index="/unitClassCtrl">设备类型管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>人员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="personList">人员列表</el-menu-item>
                <el-menu-item index="/personStatistics">人效统计</el-menu-item>
                <el-menu-item index="/workList">工作量列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-shopping-cart-1"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/shopsClass">商品类型</el-menu-item>
                <el-menu-item index="/shopsCtrl">商品管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="/methodCtrl">
              <i class="el-icon-coordinate"></i>
              <span slot="title">策略管理</span>
            </el-menu-item>

            <el-menu-item index="orderCtrl">
              <i class="el-icon-document"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>

            <el-menu-item index="/isComputed">
              <i class="el-icon-smoking"></i>
              <span slot="title">对账统计</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!-- 二级路由出口位置 -->
      <!-- <div class="two"> -->
        <router-view />
      <!-- </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    outFn () {
      this.$store.commit('user/delToken')
      this.$router.push('/login')
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    // sideNav 跳转页面
    jumpFn (path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
#app{
  padding-left: 180px;
  padding-top: 75px;
}
.el-submenu__title i {
  color: #000;
}
// #id {
//   position: relative;
// }
.leftList {
  position: fixed;
  z-index: 999;
  top: 60px;
  left: 0;
  height: 100%;
}
.el-col,
.el-col-12 {
  width: 170px;
}
.el-menu {
  border-right: none;
  height: 100%;
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 60px;
  width: 100%;
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  .logo {
    margin-top: 6px;
    margin-left: 15px;
  }
}
.rightbox {
  float: right;
  display: flex;
  align-items: center;
  margin-right: 24px;
  height: 100%;
  width: 240px;
  color: #fff;
  .username {
    margin: 0 20px;
  }
}
.two{
padding-top: 70px;
padding-left: 180px;
 width: 100%;
height: 1000px;
// background-color: #fe6f6f;
}
</style>
